<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/common.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/jquery.js'}"></script>
    <link th:href="@{${session.baseUrl}+'style/reset.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/base.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/header.css'}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" th:href="@{${session.baseUrl}+'style/transfer.css'}"/>
    <title>转让大厅</title>
    <style>
        .content li {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            padding: 0.16rem 0.3rem 0.18rem 0.3rem;


        }

        .content li img {
            width: 2.65rem;
            height: 1.8rem;
        }

        .content li > div {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-direction: normal;
            -webkit-box-orient: vertical;
            -moz-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
            -moz-justify-content: space-between;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            padding: 0.1rem 0 0.1rem 0.3rem;
        }

        .content li > div p {
            font-size: 0.26rem;
            color: #323232;
        }

        .content li > div > div:nth-of-type(1) {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -moz-align-items: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .content li > div > div:last-child {
            font-size: 0.22rem;
            color: #999;
        }

        .content li > div > div:last-child span {
            color: #323232;
        }

        .content li > div > div:last-child span:first-child {
            margin-right: 0.6rem;
        }

        .container {
            width: 3.12rem;
            height: 0.1rem;
            background: #ddd;
            border-radius: 0.1rem;
            margin-right: 0.3rem;
        }

        .num {
            font-size: 0.22rem;
            color: #2d9cff;
        }

        .child {
            height: 0.1rem;
            background: #2d9cff;
            border-radius: 0.1rem;
        }

        .people {
            margin-right: 20px;
        }
    </style>
</head>
<body onload="init()">
<header>转让<b id="select" onclick="submission(this)">筛选</b></header>
<nav>
    <a th:href="@{/wap/memberProjectTransfer.html/search1.html}">
        <div>搜索项目</div>
    </a>
</nav>

<div style="width: 100%;" id="messageinfo">
    <div th:if="${memberProjectTransferList==null || memberProjectTransferList.size()==0}">
        <img th:src="@{${session.baseUrl}+'\images\zanwu.png'}" style="width: 8.5rem;height:5.2rem;transform: translate(0rem, 0rem);"/>
    </div>
    <ul class="content" style="background-color: white;" th:each="zhuan,iterStat:${memberProjectTransferList}"
        th:if="${memberProjectTransferList!=null}">
        <a th:href="@{/wap/memberProjectTransfer.html/goumai.html/(id=${zhuan.id})}">
            <li>
                <i th:if="${zhuan.type==0}"><img th:src="@{${session.baseUrl}+'images/projectDetail/mxxm2.png'}"
                                                 alt=""/></i>
                <i th:if="${zhuan.type==1}"><img th:src="@{${session.baseUrl}+'images/projectDetail/yx.png'}"
                                                 alt=""/></i>
                <i th:if="${zhuan.type==2}"><img th:src="@{${session.baseUrl}+'images/projectDetail/xjbxm.png'}"
                                                 alt=""/></i>
                <div style="width: 4rem;height: 2rem;">
                    <p style="width: auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
                       th:text="${zhuan.memberProjectName}"></p>

                    <div style="width: 4.2rem;height: 1.5rem;margin-left: -0.2rem">
                        <div style="width: 1.4rem;height: 1.5rem;float: left;">
                            <p style="font-size: 0.3rem;padding-top: 0.3rem" align="center"
                               th:text="${zhuan.transferBuyAmount}"></p>
                            <p style="color:#707070;font-size: 0.2rem;padding-top: 0.3rem" align="center">转让金额</p>
                        </div>

                        <div style="width: 1.4rem;height: 1.5rem;float: left;">
                            <p style="color:red;font-weight: bolder;font-size: 0.4rem;padding-top: 0.2rem"
                               align="center" th:text="${#numbers.formatDecimal(100*zhuan.rate,1,2)}+'%'"></p>
                            <p style="color:#707070;font-size: 0.2rem;padding-top: 0.3rem" align="center">年化率</p>
                        </div>
                        <div style="width: 1.4rem;height: 1.5rem;float: left">
                            <p style="font-size: 0.25rem;padding-top: 0.3rem" align="center"
                               th:text="${#dates.format(zhuan.endTime,'yyyy/MM/dd')}"></p>
                            <p style="color:#707070;font-size: 0.2rem;padding-top: 0.3rem" align="center">结束时间</p>
                        </div>
                    </div>
                    <!--<div style="height: 0.15rem">
                        <div class="container">
                            <div class="child"></div>
                        </div><span class="num" style="float: right;margin-top: -0.15rem;" th:text="${#numbers.formatDecimal(100*projectDrafts.infoD,1,2)}+'%'"></span>
                    </div>-->
                </div>
            </li>
        </a>

    </ul>
</div>

<footer>
    <ul class="df pr30 pl30 jcsa">
        <li>
            <a th:href="@{/wap/index.html}"><p>首页</p></a>
        </li>
        <li>
            <a th:href="@{/wap/crowdfunding.html}"><p>众筹</p></a>
        </li>
        <li>
            <a th:href="@{/wap/transfer.html}"><p class="active">转让</p></a>
        </li>
        <li>
            <a th:href="@{/wap/mine.html}"><p>我的</p></a>
        </li>
    </ul>
</footer>
<input type="hidden" th:value="${session.baseUrl}" id="session"/>
<form th:action="@{/wap/memberProjectTransfer.html/get}" th:method="post" id="form">
    <div class="bg" style="display: none;">
        <div class="select">
            <div class="df mt30 ml30">
                <div class="g9 f1">转让金额：</div>
                <div class="add1 act" style="width: 35px;height: 22px;">全部</div>
                <ul class="g6 df fww ctr ctr1">
                    <input id="lingyi" type="hidden" name="lingyi"/>
                    <li class="add1" style="width: 90px;height: 20px;" onclick="add11()">小于10000</li>
                    <input id="yiliu" type="hidden" name="yiliu"/>
                    <li class="add1" style="width: 90px;height: 20px;" onclick="add12()">10000～50000</li>
                    <input id="liushier" type="hidden" name="liushier"/>
                    <li class="add1" style="width: 90px;height: 20px;" onclick="add13()">50000～100000</li>
                    <input id="shier" type="hidden" name="shier"/>
                    <li class="add1" style="width: 90px;height: 20px; margin-top: 1px;margin-left: 5px;"
                        onclick="add14()">100000以上
                    </li>
                </ul>
            </div>
            <div class="df mt30 ml30">
                <div class="g9 f1">年化利率：</div>
                <div class="add2 act" style="width: 35px;height: 22px;">全部</div>
                <ul class="g6 df fww ctr ctr2">
                    <input type="hidden" id="ling" name="ling"/>
                    <li class="add2" onclick="add21()">小于7%</li>
                    <input type="hidden" id="qi" name="qi"/>
                    <li class="add2" onclick="add22()">7%-10%</li>
                    <input type="hidden" id="yi" name="yi"/>
                    <li class="add2" onclick="add23()">大于10%</li>
                </ul>
            </div>

        </div>
    </div>
</form>
<script type="text/javascript" th:inline="javascript">
    //<![CDATA[
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;

    function init() {
        for (var i = 0; i < $(".child").length; i++) {
            $(".child").eq(i).css('width', parseInt($(".num").eq(i).text()) + "%");
        }
    }


    function submission(obj) {
        var a = $(obj).html();
        if (a == '完成') {
            document.getElementById("form").submit();
        }
        if (a == '筛选') {
            window.scrollTo(0, 0);
        }
    }

    function add11() {
        $("#lingyi").val(0);
        $("#yiliu").val(null);
        $("#liushier").val(null);
        $("#shier").val(null);
    }

    function add12() {
        $("#lingyi").val(null);
        $("#yiliu").val(0);
        $("#liushier").val(null);
        $("#shier").val(null);
    }

    function add13() {
        $("#lingyi").val(null);
        $("#yiliu").val(null);
        $("#liushier").val(0);
        $("#shier").val(null);
    }

    function add14() {
        $("#lingyi").val(null);
        $("#yiliu").val(null);
        $("#liushier").val(null);
        $("#shier").val(0);
    }

    function add21() {
        $("#ling").val(0);
        $("#qi").val(null);
        $("#yi").val(null);
    }

    function add22() {
        $("#ling").val(null);
        $("#qi").val(0);
        $("#yi").val(null);
    }

    function add23() {
        $("#ling").val(null);
        $("#qi").val(null);
        $("#yi").val(0);
    }

    $(function () {
        /* for (var i = 0; i < $(".child").length; i++) {
             $(".child").eq(i).css("width", parseInt($(".target").eq(i).text()) + '%');
         }*/
        $("#select").click(function () {
            if ($(".bg").is(":visible")) {
                $(this).html("筛选");
                $(".bg").hide();
                document.documentElement.style.overflow = 'auto';
                document.body.style.overflow = 'auto';
            } else {
                $(this).html("完成");
                $(".bg").show();
                document.documentElement.style.overflow = 'hidden';
                document.body.style.overflow = 'hidden';
            }
        });
        $(".add1").click(function () {
            $(".add1").removeClass("act");

            if (!$(this).hasClass("act")) $(this).addClass("act");
        });
        $(".add2").click(function () {
            $(".add2").removeClass("act");
            if (!$(this).hasClass("act")) $(this).addClass("act");
        });
        $(".add3").click(function () {
            $(".add3").removeClass("act");
            if (!$(this).hasClass("act")) $(this).addClass("act");
        });
    });

    /**
     * 分页加载
     */
    var num = 1;
    $(function () {
        $(window).scroll(
            function () {
                if ((document.documentElement.scrollHeight) == (document.documentElement.scrollTop | document.body.scrollTop) + document.documentElement.clientHeight) {
                    num = num + 1;
                    $.ajax({
                        type: "POST",
                        data: {
                            current: num,
                            amount1: [[${amount1}]],
                            amount2: [[${amount2}]],
                            rate1: [[${rate1}]],
                            rate2: [[${rate2}]],
                        },
                        url: basePath + '/wap/memberProjectTransfer.html/pageList1',
                        cache: false,
                        success: function (data) {
                            str = '';
                            var session = document.getElementById("session").value;

                            $.each(data, function (index, value) {
                                str += '<ul class="content"  style="background-color: white;">';
                                str += '<a>';
                                str += '<li>';
                                if (value.type == 0) {
                                    str += '<img src="' + session + 'images/projectDetail/mxxm2.png' + '"  alt="" class="banner"/>';
                                } else if (value.type == 1) {
                                    str += '<img src="' + session + 'images/projectDetail/yx.png' + '" alt="" class="banner"/>';
                                } else {
                                    str += '<img src="' + session + 'images/projectDetail/xjbxm.png' + '" alt="" class="banner"/>';
                                }
                                str += '<div style="width: 4rem;height: 2rem;">';

                                str += '<p  style="width: auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">' + value.memberProjectName + '</p>';
                                str += '<div style="width: 4.2rem;height: 1.5rem;margin-left: -0.2rem">';
                                str += '<div style="width: 1.4rem;height: 1.5rem;float: left;">';
                                str += '<p style="font-size: 0.3rem;padding-top: 0.3rem" align="center">￥' + value.transferAmount + '</p>';
                                str += '<p style="color:#707070;font-size: 0.2rem;padding-top: 0.3rem" align="center">转让金额</p>';
                                str += '</div>';
                                str += '<div style="width: 1.4rem;height: 1.5rem;float: left;">';
                                str += '<p style="color:red;font-weight: bolder;font-size: 0.4rem;padding-top: 0.2rem" align="center">' + value.rateStr + '</p>';
                                str += '<p style="color:#707070;font-size: 0.2rem;padding-top: 0.3rem" align="center">利率</p>';
                                str += '</div>';
                                str += '<div style="width: 1.4rem;height: 1.5rem;float: left">';
                                str += '<p style="font-size: 0.3rem;padding-top: 0.3rem" align="center">' + value.endTimeStr + '</p>';
                                str += '<p style="color:#707070;font-size: 0.2rem;padding-top: 0.3rem" align="center">结束时间</p>';
                                str += '</div>';
                                str += '</div>';
                                str += '</div>';
                                str += '</li>';
                                str += '</a>';
                                str += '</ul>';
                            });
                            $("#messageinfo").append(str); //动态加载插入HTML
                            init();
                        },
                        error: function () {
                            alert("ajax请求失败");
                        }
                    })
                }
            });
    });
    //]]>
</script>
</body>
</html>